<template>
  <transition
    enter-active-class="animated fadeInUp"
    leave-active-class="animated fadeOutDown"
  >
    <div class="setting-wrapper" v-show="menuVisible && settingVisible === 0">
      <div class="setting-font-size">
        <div
          class="preview"
          :style="{ fontSize: fontSizeList[0].fontSize + 'px' }"
        >A</div>
        <div class="select">
          <div
            class="select-wrapper"
            v-for="(item, index) of fontSizeList"
            :key="index"
            @click="setFontSize(item.fontSize)"
          >
            <div class="line"></div>
            <div class="point-wrapper">
              <div class="point" v-show="defaultFontSize === item.fontSize">
                <div class="small-point">
                </div>
              </div>
            </div>
            <div class="line"></div>
          </div>
        </div>
        <div
          class="preview"
          :style="{ fontSize: fontSizeList[fontSizeList.length - 1].fontSize + 'px' }"
        >A</div>
      </div>
      <div class="setting-font-family" @click="showFontFamilyPopup">
        <div class="setting-font-family-text-wrapper">
          <span class="setting-font-family-text">{{defaultFontFamily}}</span>
        </div>
        <div class="setting-font-family-icon-wrapper">
          <span class="iconfont">&#xe743;</span>
        </div>
      </div>
    </div>
  </transition>
</template>

<script>
import { FONT_SIZE_LIST } from '../../utils/book'
import { ebookMixin } from '../../utils/mixin'
import { saveFontSize } from '../../utils/localStroage'
export default {
  name: 'EbookSettingFont',
  mixins: [ebookMixin],
  data () {
    return {
      fontSizeList: FONT_SIZE_LIST
    }
  },
  methods: {
    setFontSize (fontSize) {
      this.setDefaultFontSize(fontSize)
      saveFontSize(this.fileName, fontSize)
      this.currentBook.rendition.themes.fontSize(fontSize + 'px')
    },
    showFontFamilyPopup () {
      this.setFontFamilyVisible(true)
    }
  }
}
</script>

<style lang="stylus" scoped>
  @import '../../assets/styles/global.styl'
  .setting-wrapper
    position: absolute
    bottom: px2rem(48)
    display: flex
    flex-direction: column
    left: 0
    z-index: 101
    width: 100%
    height: px2rem(90)
    box-shadow: 0 px2rem(-8) px2rem(8) rgba(0, 0, 0, .15)
    .setting-font-size
      flex: 2
      display: flex
      height: 100%
      width: 100%
      line-height: px2rem(60)
      .preview
        flex: 0 0 px2rem(40)
        center()
      .select
        display: flex
        flex: 1
        .select-wrapper:first-child
          .line:first-child
            border-top: none
        .select-wrapper:last-child
          .line:last-child
            border-top: none
        .select-wrapper
          flex: 1
          display: flex
          // 垂直居中
          align-items: center
          .line
            flex: 1
            height: 0
            border-top: px2rem(1) solid #ccc
          .point-wrapper
            position: relative
            flex: 0 0 0
            width: 0
            height px2rem(7)
            border-left: px2rem(1) solid #ccc
            .point
              position: absolute
              top: px2rem(-8)
              left: px2rem(-10)
              width: px2rem(20)
              height: px2rem(20)
              border-radius: 50%
              background-color white
              border: px2rem(1) solid #ccc
              box-shadow: 0 px2rem(4) px2rem(4) rgba(0, 0, 0, .15)
              center()
              .small-point
                background-color: black
                width: px2rem(5)
                height: px2rem(5)
                border-radius: 50%
    .setting-font-family
      flex: 1
      width: 100%
      font-size: px2rem(14)
      center()
      .setting-font-family-text-wrapper
        center()
      .setting-font-family-icon-wrapper
        center()
</style>
